<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { DOMAIN_NAME } from '@/request/config'

const userInfo = ref(uni.getStorageSync('aichat_user') || {})

const { t, locale } = useI18n()
const currentLang = ref(uni.getStorageSync('language') || 'zh')

// 控制语言选择弹窗
const showLangPopup = ref(false)

// 计算当前是否是维吾尔语
const isUyghur = computed(() => currentLang.value === 'ug')

onShow(() => {
  userInfo.value = uni.getStorageSync('aichat_user')
})

const backClick = () => {
  uni.navigateBack()
}

// 分享功能
onShareAppMessage(() => {
  return {
    title: t('setup.title'),
    path: '/pages/index/index',
    imageUrl: '/static/bot-bro.png'
  }
})

// 切换语言
const toggleLanguage = (lang) => {
  currentLang.value = lang
  locale.value = lang
  uni.setStorageSync('language', lang)
  showLangPopup.value = false
}

// 显示语言选择弹窗
const showLanguageSelect = () => {
  showLangPopup.value = true
}

// 将settingList改为计算属性
const settingList = computed(() => [
  {
    title: t('setup.settings.history'),
    icon: 'history',
    onClick: () => {
      uni.navigateTo({
        url: '/pages/history/history'
      })
    }
  },
  {
    title: t('setup.settings.language'),
    icon: 'language',
    value: currentLang.value === 'zh' ? '中文' : 'ئۇيغۇرچە',
    onClick: showLanguageSelect
  },
  {
    title: t('setup.settings.font'),
    icon: 'font',
    onClick: () => {
      uni.navigateTo({
        url: '/pages/font/font'
      })
    }
  },
  {
    title: t('setup.settings.about'),
    icon: 'info',
    onClick: () => {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    }
  },
  {
    title: t('setup.settings.share'),
    icon: 'share',
    onClick: () => { }
    // 移除onClick处理，因为使用open-type="share"后会自动触发分享
  },
  {
    title: t('setup.settings.feedback'),
    icon: 'feedback',
    onClick: () => {
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      })
    }
  },
  {
    title: t('setup.settings.agreement'),
    icon: 'file-text',
    onClick: () => {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    }
  }
])
</script>

<template>
  <tn-navbar backgroundColor="#fff" fixed :title="t('setup.title')">
    <template #back>
      <tn-icon name="left" size="40" @click="backClick"></tn-icon>
    </template>
  </tn-navbar>

  <view class="setup" :class="{ 'rtl': isUyghur }">
    <!-- 用户信息区域 -->
    <view class="user-card">
      <view class="user-info">
        <image :src="DOMAIN_NAME + '/file/' + userInfo.avatar" />
        <view style="display: flex;flex-direction: column">
          <text class="username">{{ userInfo.nickname }}</text>
          <text class="user-id">{{ userInfo.phone ? userInfo.phone : t('setup.user.noPhone') }}</text>
        </view>

      </view>
      <tn-icon name="set" size="40" color="#666"></tn-icon>
    </view>

    <!-- 后台设置卡片 -->
    <view class="black-card">
      <view class="card-content">
        <text>{{ t('setup.backend.title') }}</text>
        <button class="enable-btn">{{ t('setup.backend.button') }}</button>
      </view>
    </view>

    <!-- 设置列表 -->
    <view class="setting-group">
      <view class="setting-list">
        <view v-for="(item, index) in settingList" :key="index" class="setting-item"
          :class="{ 'no-border': index === settingList.length - 1 }">
          <button v-if="item.title === t('setup.settings.share')" open-type="share" class="share-button">
            <view class="setting-item-content">
              <view class="item-title">
                <text>{{ item.title }}</text>
              </view>
              <view class="item-right">
                <tn-icon :name="isUyghur ? 'left' : 'right'" size="32" color="#ccc"></tn-icon>
              </view>
            </view>
          </button>
          <view v-else class="setting-item-content" @click="item.onClick && item.onClick()">
            <view class="item-title">
              <text>{{ item.title }}</text>
            </view>
            <view class="item-right">
              <text v-if="item.value" class="value-text">{{ item.value }}</text>
              <tn-icon :name="isUyghur ? 'left' : 'right'" size="32" color="#ccc"></tn-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright">
      Copyright © 2019-2024 Nevsal.All Rights Reserved.
    </view>
  </view>
  <!-- 语言选择弹窗 -->
  <tn-popup v-model="showLangPopup" open-direction="bottom">
    <view class="lang-popup">
      <view class="lang-title">请选择语言</view>
      <view class="lang-list">
        <view class="lang-item" :class="{ active: currentLang === 'zh' }" @click="toggleLanguage('zh')">
          中文
        </view>
        <view class="lang-item" :class="{ active: currentLang === 'ug' }" @click="toggleLanguage('ug')">
          ئۇيغۇرچە
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<style scoped lang="scss">
.setup {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;

  // RTL 样式
  &.rtl {
    direction: rtl;
  }

  .user-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 40rpx 32rpx;
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;



    .user-info {
      display: flex;
      gap: 8rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }

      .username {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
      }

      .user-id {
        font-size: 28rpx;
        color: #999;
      }
    }
  }

  .black-card {
    background: #000;
    border-radius: 20rpx;
    margin: 24rpx 0;
    padding: 32rpx 40rpx;

    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      text {
        color: #fff;
        font-size: 32rpx;
        font-weight: 400;
      }

      .enable-btn {
        background: #0066ff;
        color: #fff;
        font-size: 32rpx;
        padding: 16rpx 40rpx;
        border-radius: 12rpx;
        border: none;
        line-height: 1;
        margin: 0;

        &::after {
          border: none;
        }
      }
    }
  }

  .setting-group {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx 0;

    .setting-list {
      .setting-item {
        border-bottom: 1rpx solid #f5f5f5;

        .share-button {
          background: none;
          padding: 0;
          margin: 0;
          line-height: normal;
          border: none;
          text-align: left;
          width: 100%;
          font-size: inherit;
          color: inherit;
          font-weight: normal;

          &::after {
            border: none;
          }
        }

        .setting-item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx;

          &.no-border {
            border-bottom: none;
          }

          .item-title {
            font-size: 30rpx;
            color: #333;
          }

          .item-right {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .value-text {
              font-size: 28rpx;
              color: #999;
            }
          }
        }
      }
    }

    .copyright {
      text-align: center;
      font-size: 24rpx;
      color: #999;
      margin: 60rpx 0 40rpx;
    }


  }
}

.lang-popup {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 24rpx 24rpx 0 0;

  .lang-title {
    font-size: 28rpx;
    color: #999;
    text-align: center;
    margin-bottom: 32rpx;
  }

  .lang-list {
    .lang-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      color: #333;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      &.active {
        color: #0066ff;
      }

      &:active {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>